<template>
  <button
    class="inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
    :class="{ 'bg-accent text-accent-foreground': isAssistantVisible }"
    :title="isAssistantVisible ? t('aiAssistant.closeTooltip') : t('aiAssistant.openTooltip')"
    @click="toggleAssistant">
    <i class="i-mdi-robot h-5 w-5" />
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue';

import { t } from '@/i18n';
import { useAiAssistantStore } from '@/stores/aiAssistant';

const aiAssistantStore = useAiAssistantStore();

// 计算属性
const isAssistantVisible = computed(() => aiAssistantStore.isVisible);

// 方法
const toggleAssistant = async () => {
  await aiAssistantStore.toggleAssistant();
};
</script>

<style lang="scss" scoped>
/* 过渡动画 */
button {
  transition: var(--transition-theme);
}
</style>
